<template>
	<view class="content">
		<view class="from-info-box">
			<view class="from-item-box">
				<view class="title-box">
					<text>序列号</text>
				</view>
				<view class="input-box">
					<input type="text" v-model="formInfo.number" placeholder="请填写球杆序列号" placeholder-style="color:#CCC">
					<image class="scanImg" @click="bindCode" src="../static/icon3.png" mode="heightFix"></image>
				</view>
			</view>
			<view class="from-item-box">
				<view class="title-box">
					<text>姓名</text>
				</view>
				<view class="input-box">
					<input type="text" v-model="formInfo.name" placeholder="请填写您的姓名" placeholder-style="color:#CCC">
				</view>
			</view>
			<view class="from-item-box">
				<view class="title-box">
					<text>电话</text>
				</view>
				<view class="input-box">
					<input type="number" maxlength="11" v-model="formInfo.phone" placeholder="请填写您的电话"
						placeholder-style="color:#CCC">
				</view>
			</view>
			<view class="from-item-box">
				<view class="title-box">
					<text>选择城市</text>
				</view>
				<view class="input-box" @click="bindShowPicker(1)">
					<input type="text" v-model="formInfo.city" placeholder="请选择所在城市" :disabled="true"
						placeholder-style="color:#CCC">
					<image class="scanImg" src="../static/icon2.png" mode="heightFix"></image>
				</view>
			</view>
			<view class="from-item-box">
				<view class="title-box">
					<text>选择门店</text>
				</view>
				<view class="input-box" @click="bindShowPicker(2)">
					<input type="text" v-model="shopName" placeholder="请选择门店" :disabled="true"
						placeholder-style="color:#CCC">
					<image class="scanImg" src="../static/icon2.png" mode="heightFix"></image>
				</view>
			</view>
			<view class="from-item-box" v-if="showOther">
				<view class="title-box">
					<text>门店名称</text>
				</view>
				<view class="input-box">
					<input type="text" v-model="formInfo.mer_name" placeholder="请填写门店名称" placeholder-style="color:#CCC">
				</view>
			</view>
			<view class="from-item-box">
				<view class="title-box">
					<text>上传图片<text style="font-size: 28rpx;color: #CCC;font-weight: normal;">（销售小票或销售发票）</text></text>
				</view>
				<view class="input-box">
					<view class="upload-img-box flex-c-w">
						<view class="upload-img-box-item" v-for="(item, index) in formInfo.img"
							@click="bindImgPreview(item.path)" :key="index">
							<image :src="item.path" mode="aspectFill"></image>
							<view class="del" @click.stop="bindDel(index)">
								<image src="/pageMember/static/icon12.png" mode="widthFix"></image>
							</view>
						</view>
						<view class="upload-img-item" @click="bindAddImg">
							<image src="../static/icon11.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-plate-box">
			<!-- 底部but -->
			<!-- submit bindSubmit -->
			<view class="bottom-but-box" @click="submit">
				<text>提交认证</text>
			</view>
		</view>
		<u-popup v-model="show" mode="bottom">
			<view>
				<address-picker @onCancel="show = false" @onConfirm="onConfirm" :lists="citys"></address-picker>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
		<!-- <u-picker mode="region" v-model="show" :area-code='["0", "0", "0"]' @confirm="confirm"></u-picker> -->
		<u-picker mode="selector" v-model="shows" :default-selector="[0]" :range="shopList" range-key="mer_name"
			@confirm="shopConfirm"></u-picker>
	</view>
</template>

<script>
	import addressPicker from '@/components/addressPicker/addressPicker.vue';

	function debounce(fn, time) {
		let _arguments = arguments
		let timeout = null
		return function() {
			if (timeout) {
				clearTimeout(timeout)
			}
			timeout = setTimeout(() => {
				fn.call(this, _arguments)
			}, time);
		}
	}
	export default {
		components: {
			addressPicker
		},
		data() {
			return {
				showOther: false,
				show: false,
				shows: false,
				shopList: [], //门店列表
				citys: [], //城市数据
				cityId: "", //城市id
				shopName: "", //门店名字
				formInfo: { //表单信息
					number: "",
					name: "",
					phone: "",
					city: "",
					mer_id: "",
					img: [],
					mer_name: '',
				},
			}
		},
		onReady() {
			this.getAllCity();
		},
		onLoad() {
			uni.showLoading({
				title: "加载中"
			});
			this.getShopList();
		},
		methods: {
			bindAddImg() { // 图片上传
				const {
					img
				} = this.formInfo
				if (img.length == 9) {
					this.$showToast("最多上传9张");
					return
				}
				this.$uploadPic(9 - img.length, res => {
					this.formInfo.img = [...img, ...res]
				})
			},
			// 图片预览
			bindImgPreview: function(current) {
				const {
					img: imgList,
					urls = imgList.map(item => item.path)
				} = this.formInfo
				uni.previewImage({
					current,
					urls
				})
			},
			// 删除图片
			bindDel: function(index) {
				this.formInfo.img.splice(index, 1)
			},
			bindCode() { // 调起条码扫描
				let _this = this;
				uni.scanCode({
					scanType: ['barCode', 'qrCode', 'datamatrix', 'pdf417'],
					success: function(res) {
						console.log(res)
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						_this.formInfo.number = res.result;
					},
					fail: msg => {
						uni.showToast({
							title: '识别失败,请对准条形码重试',
							icon: 'none'
						})
						console.log(msg)
					}
				});
			},
			bindShowPicker(status) { //showPicker
				status == 1 ? this.show = true : this.shows = true;
			},
			onConfirm(e) {
				console.log(e);
				this.getShopList(e.id[0]);
				this.formInfo.city = e.name;
				this.show = false;
			},
			shopConfirm(e) {
				console.log('得到下标索引：', e[0]);
				this.formInfo.mer_id = this.shopList[e[0]].mer_id;
				this.shopName = this.shopList[e[0]].mer_name;
				console.log(this.shopList.length)
				this.showOther = e[0] == this.shopList.length - 1
			},



			submit: debounce(function() {
				// console.log('lalalalalal')
				this.bindSubmit()
			}, 2000),

			bindSubmit() { //表单提交
				let {
					number,
					name,
					phone,
					city,
					img,
					mer_id,
					mer_name
				} = this.formInfo;
				let reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				if (number == "") {
					this.$showToast("请填写球杆序列号");
					return
				}
				if (name == "") {
					this.$showToast("请填写您的姓名");
					return
				}
				if (phone == '' || phone == undefined || phone == null) {
					this.$showToast("请输入您的电话号码");
					return
				} else {
					if ((!reg.test(phone)) && phone != '') {
						this.$showToast("请输入正确的电话号码");
						return
					}
				}
				if (city == "") {
					this.$showToast("请选择所在城市");
					return
				}
				if (this.shopName == "") {
					this.$showToast("请选择门店");
					return
				}
				if (!mer_id && !mer_name) {
					this.$showToast("请填写门店名称");
					return
				}
				// if (!img.length) {
				// 	this.$showToast("至少上传一张图片");
				// 	return
				// }
				console.log(this.formInfo, '------');
				const param = {
					number,
					name,
					phone,
					city,
					img: img.map(item => item.path).join(','),
					mer_id,
					mer_name
				}
				console.log(param)
				this.$u.api.clubCertificationApi(param).then(res => {
					if (res.code == 1) {
						this.$refs.uToast.show({
							title: res.message,
							position: 'center'
						});
						setTimeout(() => {
							this.$gourl(`./success`);
						})
					}
				});
			},
			getAllCity() { //获取省市区
				this.$u.api.getAllCityApi({}).then(res => {
					if (res.code == 1) {
						this.citys = res.data;
						console.log(this.citys, '------');
					}
				});
			},
			getShopList(city) { //获取门店数据
				this.$u.api.shopListApi({
					city
				}).then(res => {
					if (res.code == 1) {
						console.log('门店列表：', res.data);
						this.shopList = res.data;
						this.shopList.push({
							mer_name: '其他',
							mer_id: '',
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	// .upload-img-box{
	// 	.title-box{
	// 		padding-bottom: 30rpx;
	// 		font-size: 30rpx;
	// 		font-weight: bold;
	// 		color: #333333;
	// 	}
	// 	.input-box{
	// 		position: relative;
	// 		width: 100%;
	// 		input{
	// 			font-size: 30rpx;
	// 			font-weight: 400;
	// 			padding: 30rpx;
	// 			border: 1rpx solid #000;
	// 			border-radius: 20rpx;
	// 		}
	// 	}
	// }

	// .upload-img-box{
	// 	width: 100%;
	// 	.upload-img-box-item{
	// 		position: relative;
	// 		line-height: 0;
	// 		image{width: 210rpx;height: 210rpx;margin: 0 20rpx 20rpx 0;}
	// 		.del{
	// 			// position: absolute;
	// 			// top: 0;
	// 			// right: 20rpx;
	// 			// image{width: 35rpx; height: 35rpx;margin: auto;}
	// 		}
	// 	}
	// 	.upload-img-item{
	// 		width: 210rpx;
	// 		height: 210rpx;
	// 		background: #F5F6FA;
	// 		position: relative;
	// 		margin-bottom: 20rpx;
	// 		display: flex; justify-content: center; align-items: center;
	// 		image{width: 60rpx;height: 60rpx;}
	// 	}
	// }

	.upload-img-box {
		width: 100%;

		.upload-img-box-item {
			position: relative;
			line-height: 0;

			image {
				width: 210rpx;
				height: 210rpx;
				margin: 0 20rpx 20rpx 0;
			}

			.del {
				position: absolute;
				top: 0;
				right: 20rpx;

				image {
					width: 35rpx;
					height: 35rpx;
					margin: auto;
				}
			}
		}

		.upload-img-item {
			width: 210rpx;
			height: 210rpx;
			background: #F5F6FA;
			margin-bottom: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}

	.content {
		width: 100%;
		height: calc(100vh - 150rpx);
		overflow: hidden;
		overflow-y: auto;
		font-family: Microsoft YaHei;
		box-sizing: border-box;

		.from-info-box {
			padding: 30rpx;

			.from-item-box {
				padding: 20rpx 0;

				.title-box {
					font-size: 34rpx;
					font-weight: bold;
					color: #333333;
					margin-bottom: 20rpx;
				}

				.input-box {
					position: relative;
					width: 100%;

					input {
						font-size: 30rpx;
						font-weight: 400;
						padding: 30rpx;
						padding-right: 80rpx;
						border: 1rpx solid #000;
						border-radius: 20rpx;
					}

					textarea {
						width: 90%;
						font-size: 30rpx;
						font-weight: 400;
						padding: 30rpx;
						border: 1rpx solid #000;
						border-radius: 20rpx;
					}

					.scanImg {
						position: absolute;
						right: 30rpx;
						top: 50%;
						transform: translateY(-50%);
						width: 30rpx;
						height: 30rpx;
						z-index: 100;
					}
				}
			}
		}

		.bottom-plate-box {
			position: fixed;
			bottom: 0;
			z-index: 100;
			width: 100%;
			padding: 30rpx 20rpx;
			padding-bottom: 50rpx;
			background: #fff;

			.bottom-but-box {
				width: 100%;
				padding: 25rpx 0;
				background: #000;
				font-size: 30rpx;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				border-radius: 50rpx;
			}
		}
	}
</style>